<!--
 * @Author: Lakeiedward
 * @Date: 2022-02-26 17:59:07
 * @LastEditTime: 2022-02-27 16:47:35
 * @FilePath: \demo2\src\components\one.vue
-->
<template>
  <div class="add">
    <three :receptions="theProjectObjectss"></three>
    <div>
      <div style="margin: 20px"></div>
      <el-form
        :label-position="labelPosition"
        label-width="100%"
        :model="formLabelAlign"
      >
        <el-form-item label="输入消费项目">
          <el-input
            v-model="formLabelAlign.theNameOfConsumption"
            ref="one"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入消费项目金额">
          <el-input
            v-model.number="formLabelAlign.sumOfConsumption"
            ref="two"
          ></el-input>
        </el-form-item>
      </el-form>
      <p><el-button type="primary" @click="save">点击保存</el-button></p>
    </div>

    <two :reception="theProjectObjects"></two>
  </div>
</template>
<script>
import Three from "./three.vue";
import two from "./two.vue";
export default {
  components: { two, Three },
  props: {},
  data() {
    return {
      theProjectObjects: [],
      theProjectObjectss: [],
      labelPosition: "top", // 对齐方式
      formLabelAlign: {
        theNameOfConsumption: "", // 消费名称
        sumOfConsumption: null, //消费金额
      },
      time: null,
    };
  },
  methods: {
    save() {
      const time = new Date();
      const year = time.getFullYear();
      const month = time.getMonth() + 1;
      const day = time.getDate();
      const Hours = time.getHours();
      const min =
        time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
      const seconds =
        time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
      const z = `${year}-${month}-${day} ${Hours}:${min}:${seconds}`;
      if (!this.$refs.one.value == "" && !this.$refs.two.value == "") {
        this.theProjectObjects.push({
          value: this.formLabelAlign.sumOfConsumption,
          name: this.formLabelAlign.theNameOfConsumption,
          time: z,
        });
        this.theProjectObjectss.push({
          value: this.formLabelAlign.sumOfConsumption,
          name: this.formLabelAlign.theNameOfConsumption,
        });
        const turnTheString = JSON.stringify(this.theProjectObjects);
        const turnTheStrings = JSON.stringify(this.theProjectObjectss);
        localStorage.setItem("aaa", turnTheString);
        localStorage.setItem("bbb", turnTheStrings);
        this.formLabelAlign.theNameOfConsumption = "";
        this.formLabelAlign.sumOfConsumption = "";
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success",
        });
      } else {
        this.debounce();
      }
    },
    debounce() {
      if (this.time) {
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        this.xxx();
      }, 500);
    },
    xxx() {
      this.$message({
        showClose: true,
        message: "请正确输入",
        type: "error",
      });
    },
  },
  computed: {
    aggregateAmount() {
      let y = 0;
      this.theProjectObjects.forEach((item) => {
        return (y += item.value);
      });
      return y;
    },
  },
  mounted() {
    const ww = localStorage.getItem("bbb");
    if (ww) {
      const w = JSON.parse(localStorage.getItem("aaa"));
      const ss = JSON.parse(localStorage.getItem("bbb"));
      this.theProjectObjects = w;
      this.theProjectObjectss = ss;
    }
  },
};
</script>
<style scoped lang='scss'>
.add {
  width: 100%;
}
.el-button {
  margin-top: 20px;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>